// hook
import { useState, useEffect } from 'react'
import { Loading, SideBar } from 'antd-mobile'
import { Link, useNavigate,useLocation } from 'react-router-dom'

// css 样式
import '../assets/css/cate.css'
// 组件
import Top from '../components/top'
// 封装好的接口
import { getCate, getCateList,Cartadd } from '../request/app'


function Cate() {
     //state 接参
     const {state} = useLocation()
     // 编程式导航
     const Navigate = useNavigate()
     //一级分类
     const [cateList, setCateList] = useState([])
     //二级分类
     const [info, setInfo] = useState([])
     // uid
     const [xiaou, setXiaou] = useState(JSON.parse(sessionStorage.getItem('xiaou')))

     // 调用接口,页面加载就调用接口
     useEffect(() => {
          // 一级分类接口
          getCate()
               .then((res) => {
                    console.log(res, '一级分类接口响应');
                    console.log(res.list[0].id, '2222222222');
                    if (res.code == 200) {
                         setCateList([...res.list])
                    }

                    console.log(cateList, '一级分类');//[]
               })
          changeCate(1)
     }, [])
     // 点击一级获取 二级商品
     function changeCate(id) {
          console.log(id);
          getCateList(
               { fid: id }
          )
               .then((res) => {
                    console.log(res, '二级分类商品');
                    if (res.code == 200) {
                         setInfo([...res.list])
                    }
               })
     }
     // 回退上一页
     const cliTop = () => {
          Navigate(-1)
     }
     // 加入购物车事件
     const cliCart = (idx) => {
          console.log(idx,'aaaaaa');
          if (xiaou) {
               console.log(xiaou.uid);
               //调用 添加购物车接口
               Cartadd({
                    uid: xiaou.uid,
                    type:1,
                    goodsid: idx,
                    num: 1
               }).then((res) => {
                    console.log(res, '购物车添加');
                    if (res.code == 200) {
                         // 跳转
                         Navigate('/index/cart')
                    }
               })
          } else {
               // 跳转
               Navigate('/login')
          }

     }
     // 渲染
     return (<div className='cate'>
          <div className='top'>
               {/* 组件 */}
               <Top />
               <div className='top_om'>
                    <p onClick={() => cliTop()}>&lt;</p>
                    商品分类
               </div>
          </div>
          <div className='wrap'>
               {/* <!-- 搜索框 --> */}
               <div className="bottom_box">
                    <div className="sousuo">
                         <input type="text" className="iconfont" placeholder="&#xe651; 按内容搜索" />
                    </div>
               </div>
               {/* 左右 */}
               <div className="box">
                    <div className="left_box">
                         <p>本周特惠</p>
                         <ul>
                              {cateList.map((item, idx) => (
                                   <li onClick={() => changeCate(idx + 1)} key={item.id}  > {item.catename}</li>
                              ))}
                         </ul>

                    </div>
                    <div className="right_box">
                         <div>
                              <h1>热门精选</h1>
                              {
                                   info.map((item,idx) => {
                                        return (
                                             <Link id='link' to={'/list'} state={{ id: item.id , type: 1 }} key={item.id}>
                                                  <div className='module' key={item.id}>
                                                       <img src={item.img} alt="" />
                                                       <div className='text'>
                                                            <span >限时</span>
                                                            <h2>{item.goodsname}</h2>
                                                            <p>{item.text}</p>
                                                            <div className="bot">
                                                                 <div className='inner'>
                                                                      <span>￥</span>
                                                                      <span>{item.price}</span>
                                                                      <del>￥{item.market_price}</del>
                                                                      <p><span>{item.description}</span></p>
                                                                 </div>
                                                                 <p onClick={() => cliCart(idx+1)}>
                                                                      加入购物车
                                                                 </p>
                                                            </div>
                                                       </div>
                                                  </div>
                                             </Link>
                                        )
                                   })
                              }

                         </div>

                    </div>
               </div>
          </div>
     </div>)
}
export default Cate